<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人社保计算软件</title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		 
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		 
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script>
			function calc() {
				//1.取出文本框里的工资值
				sal=$("#salary").val();
				salnum=parseInt(sal);
				//2.计算
				ylgr=salnum*0.08;
				ylgs=salnum*0.2;
				ybgr=salnum*0.02;
				ybgs=salnum*0.06;
				sygr=salnum*0.005;
				sygs=salnum*0.015;
				gsgs=salnum*0.005;
				gssy=salnum*0.008;
				grgjj=salnum*0.12;
				gsgjj=salnum*0.12;
				//3.把计算结果放到单元格里
				$("#ylgr01").text(ylgr);
				$("#ylgs01").text(ylgs);
				$("#ybgr01").text(ybgr);
				$("#ybgs01").text(ybgs);
				$("#sygr01").text(sygr);
				$("#sygs01").text(sygs);
				$("#gsgs01").text(gsgs);
				$("#gssy01").text(gssy);
				$("#grgjj01").text(grgjj);
				$("#gsgjj01").text(gsgjj);
				$("#grhj01").text(ylgr+ybgr+sygr+grgjj);
				$("#gshj01").text(ylgs+ybgs+sygs+gsgs+gsgjj+gssy);
				gshj=ylgs+ybgs+sygs+gsgs+gsgjj+gssy;
				$("#ze01").text(gshj+salnum);
			}
		</script>
	</head>
	<body>
	<div class="container text-center">
		<h2>个人社保计算器-朱张旭</h2>
		<table class="table table-bordered">
		 <tr>
		   <td>工资</td>
		   <td colspan="3">
			   <input id="salary"  placeholder="请输入工资" class="form-control" type="text" />
		   </td>
		   <td>
			   <button onclick="calc()" class="btn btn-danger btn-block">计算</button>
		   </td>
	     </tr>
		 <tr class="bg-primary">
			<td>险种</td> 
			<td>个人%</td>
			<td>个人</td>
			<td>公司%</td>
			<td>公司</td>
		 </tr>
		 <tr>
			<td>养老</td>
			<td>8%</td>
			<td id="ylgr01"></td>
			<td>20%</td>
			<td id="ylgs01"></td>
		 </tr>
		 <tr>
		 			<td>医保</td>
		 			<td>2%</td>
		 			<td id="ybgr01"></td>
		 			<td>6%</td>
		 			<td id="ybgs01"></td>
		 </tr>
		 <tr>
		 			<td>失业</td>
		 			<td>0.5%</td>
		 			<td id="sygr01"></td>
		 			<td>1.5%</td>
		 			<td id="sygs01"></td>
		 </tr>
		 <tr>
		 			<td>工伤</td>
		 			<td></td>
		 			<td></td>
		 			<td>0.5%</td>
		 			<td id="gsgs01"></td>
		 </tr>
		 <tr>
		 			<td>生育</td>
		 			<td></td>
		 			<td></td>
		 			<td>0.8%</td>
		 			<td id="gssy01"></td>
		 </tr>
		 <tr>
		 			<td>公积金</td>
		 			<td>12%</td>
		 			<td id="grgjj01"></td>
		 			<td>12%</td>
		 			<td id="gsgjj01"></td>
		 </tr>
		 <tr>
		 			<td>合计</td>
		 			<td>个人合计</td>
		 			<td id="grhj01"></td>
		 			<td>公司合计</td>
		 			<td id="gshj01"></td>
		 </tr>
		 <tr>
		 			<td>总额</td>
		 			<td id="ze01" colspan="4"></td> 			
		 </tr>
		</table>
	</div>
	</body>
</html>